import React, { useEffect, useState } from 'react'
import './App.scss'
import { TabBar } from 'antd-mobile'
import { WapHomeO } from '@react-vant/icons';
import { Outlet, useNavigate } from 'react-router-dom'
import {
  AppOutline,
  MessageFill,
  UserOutline,
  AddCircleOutline
} from 'antd-mobile-icons'
let tabs = [
  {
    key: "/app/home",
    title: "首页",
    icon: <WapHomeO />,
  },
  {
    key: "/app/job",
    title: "岗位",
    icon: <AppOutline />,
  },
  {
    key: "/app/release",
    title: "发布",
    icon: <AddCircleOutline />,
  },
  {
    key: "/app/message",
    title: "消息",
    icon: <MessageFill />,
  },
  {
    key: "/app/my",
    title: "我的",
    icon: <UserOutline />,
  }
]
export default function App() {
  let id = localStorage.getItem('id')
  let navigate = useNavigate()
  return (
    <div className='app'>
      <Outlet></Outlet>
      <div className='foot'>
        <TabBar onChange={(value) => { return navigate(value) }}>
          {tabs.map(item => {
            if (item.key === '/app/release') {
              if (id) {
                return <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
              }
            } else {
              return <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            }
          })}
        </TabBar>
      </div>
    </div>
  )
}
